<template>
  <!-- 信誉额度 -->
  <div>
    <el-form :model="formData" label-width="100px" label-suffix=":" ref="form">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item class="special" label="信誉等级" >
            <el-select
              v-model="formData.creditRating"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.creditOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="信誉额度" prop="creditAmount">
            <el-input
              v-model.trim="formData.creditAmount"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="款期额度" prop="periodAmount">
            <el-input
              v-model.trim="formData.periodAmount"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结算方式" prop="paymentMode">
            <el-select
              v-model.trim="formData.paymentMode"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.settlementMethods"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item class="special" label="付款周期" prop="paymentCycle">
            <el-select
              v-model.trim="formData.paymentCycle"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.paymentCycle"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="formData.remark"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item class="special" label="修改人员" prop="updateBy">
            <el-input
              v-model.trim="formData.updateBy"
              clearable
              disabled
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="修改时间" prop="updateTime">
            <el-input
              v-model.trim="formData.updateTime"
              clearable
              disabled
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    isNew: {
      type: Boolean,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        //信誉额度
        contactComId: this.$route.query.id,
        createBy: "",
        createTime: "2024-5-18 13:00:00",
        creditAmount: "",
        creditRating: "",
        customerRating: "",
        id: "",
        isDeleted: false,
        paymentCycle: "",
        paymentMode: "",
        periodAmount: "",
        relationType: "",
        remark: "",
        updateBy: "",
        updateTime: "",
      },
      compareFormData: {},
      isUpdatess: false,
      creditOptions: [],//信誉等级
      settlementMethods: [],//结算方式
      paymentCycle: [],//付款周期
    };
  },
  components: {},
  methods: {
    async getData() {
      let res = await this.$http.get("/api/crcredit/querybyid", {
        Id: this.$route.query.id,
      });
      // console.log("信誉额度", res);
      if (res.data != null) {
        this.formData = res.data;
        this.compareFormData = JSON.parse(JSON.stringify(res.data))
      }

      // 获取所有字典
      let dictAll = await this.$http.get("/api/basedict/query");
      let creditLevel = await this.$http.get("/api/basedictdetail/query", {
        DictId: dictAll.content.filter(
          (item) => item.description == "信誉等级"
        )[0].id,
        DictName: "",
        KeyWords: "",
      });
      let settlementMethods = await this.$http.get("/api/basedictdetail/query", {
        DictId: dictAll.content.filter(
          (item) => item.name == "结算方式"
        )[0].id,
        DictName: "",
        KeyWords: "",
      });
      let paymentCycle = await this.$http.get("/api/basedictdetail/query", {
        DictId: dictAll.content.filter(
          (item) => item.name == "付款周期"
        )[0].id,
        DictName: "",
        KeyWords: "",
      });
      
      this.creditOptions = creditLevel.content;
      this.settlementMethods = settlementMethods.content;
      this.paymentCycle = paymentCycle.content;
      console.log('creditOptions', this.creditOptions);
    },
    resetFormData() {
      this.formData = JSON.parse(JSON.stringify(this.compareFormData))
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    formData: {
      handler: function (newVal, oldVal) {
        if (this.isUpdatess) {
          this.$emit("creditLimitData", newVal)
          this.$emit("acceptData", newVal);
        }
        this.isUpdatess = true
      },
      deep: true,
    },
  },
});
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--small {
  margin-bottom: 8px;
}
</style>
